<template>
	<view>
		<myheader :leftType="2" :noLeft="false" :showTitle="'健康顾问'"
			showBackground="white"></myheader>
		<view class="content">
			<view class="content-des">
				<view class="content-des-item" v-for="item in 10" :key="item">
					<image class="content-des-item-1" src="/static/index/1.png" mode=""></image>
					<view class="content-des-item-2">
						<view class="content-des-item-2-1">代用名</view>
						<view class="content-des-item-2-2">
							<image class="content-des-item-2-2-img" src="/static/index/renzheng.svg" mode=""></image>
							<view class="content-des-item-2-2-txt">已认证</view>
						</view>
					</view>
					<view class="content-des-item-3">一级注册营养师</view>
					<view class="content-des-item-4">立即咨询</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
		import myheader from '../../components/header/index.vue';
	export default {
		components: {
			myheader
		},
		data() {
			return {
				navHeight: '',
				navTop: '',
				navObj: '',
				navObjWid: ''
			}
		},
		mounted() {
			const systemInfo = uni.getSystemInfoSync();
			let menuButtonObject = wx.getMenuButtonBoundingClientRect();
			let statusBarHeight = systemInfo.statusBarHeight
			let navTop = menuButtonObject.top
			let navObjWid = systemInfo.windowWidth - menuButtonObject.right + menuButtonObject.width // 胶囊按钮与右侧的距离 = windowWidth - right+胶囊宽度
			let navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;
			this.navHeight = navHeight; //导航栏总体高度
			this.navTop = navTop; //胶囊距离顶部距离
			this.navObj = menuButtonObject.height; //胶囊高度
			this.navObjWid = navObjWid; //胶囊宽度(包括右边距离)
		
		},
		methods: {
			goShare() {},
		}
	}
</script>
<style lang="scss">
	.jiaonang {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
		background-color: #fff;
		&-box {
			display: flex;
			justify-content: flex-end;
			&-back {
				display: flex;
				align-items: center;
				justify-content: space-around;
				&-img {
					margin-right: 5px
				}
				&-txt {
					font-size: 32rpx;
					font-weight: 500;
					color: #1ABC9C;
				}
			}
		}
	}
	.content {
		padding-bottom: 100px;
	}
.content-des {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
	&-item {
		margin-top:10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		border-radius: 10px;
		padding: 5px 5px 10px;
		width: 164px;
		&-1 {
			width:162px;
			height: 162px;
			border-radius: 10px;
		}
		&-2 {
			margin-top: 10px;
			display:flex;
			align-items: center;
			&-1 {
				font-weight: 700;
				color: #2A537C;
				font-size: 16px;
			}
			&-2 {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: rgba(26, 188, 156, 0.149);
				border-radius: 3px;
				padding: 4px;
				margin-left: 4px;
				&-img {
					width: 14px;
					height: 10px;
				}
				&-txt {
					color:#00BC8D;
					font-size: 12px;
					font-weight: 700;
					margin-left: 4px;
				}
			}
		}
		&-3 {
			margin-top: 10px;
			font-size: 14px;
			color: rgba(124, 146, 168, 1);
		}
		&-4 {
			margin-top: 10px;
			background-color: rgba(0, 188, 141, 1);
			color: #fff;
			font-size: 16px;
			font-weight: 700;
			border-radius: 999px;
			width: 162px;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
	} 
}
</style>
